<template>
    <div class="wrapper">
      <!-- header部分 -->
      <header>
        <p>我的钱包</p>
        <i class="fa fa-home home-icon" @click="goBack"></i>
      </header>
  
      <!-- 钱包概览 -->
      <div class="wallet-overview-section">
        <div class="balance-card" :style="walletCardStyle">
            <div v-if="loading" class="loading-state">
                        <i class="fa fa-spinner fa-spin"></i>
                        <span>加载中...</span>
                    </div>
            <div v-else>
                <div class="balance-label">账户余额 (元)</div>
                <div class="balance-amount">{{ formatAmount(wallet.balance) }}</div>
                <!-- VIP等级显示 - 可点击 -->
                <div class="vip-info" @click="showVipDialog = true">
                    <div class="vip-badge">
                        <span class="vip-level">VIP {{currentVipInfo.level }}</span>
                        <span class="vip-name">{{ currentVipInfo.name }}</span>
                        <i class="fa fa-info-circle vip-info-icon" :style="{ color: vipTextColor }"></i>
                    </div>
                    <div class="consumption-info" :style="{ color: vipTextColor }">
                        累计消费: {{ formatAmount(wallet.consumption) }}元
                    </div>
                    <div v-if="nextVipInfo" class="next-level-info" :style="{ color: vipTextColor }">
                        距离 {{ nextVipInfo.name }} 还需消费 {{ formatAmount(nextLevelNeed) }}元
                    </div>
                    <div v-else class="next-level-info" :style="{ color: vipTextColor }">
                        已是最高等级
                    </div>
                </div>
                <div class="balance-details">
                    <div class="detail-item">
                        <span class="label" :style="{ color: vipTextColor }">可用余额</span>
                        <span class="value" :style="{ color: vipTextColor }">{{ formatAmount(wallet.availableBalance) }}</span>
                    </div>
                    <div class="detail-item">
                        <span class="label" :style="{ color: vipTextColor }">冻结金额</span>
                        <span class="value" :style="{ color: vipTextColor }">{{ formatAmount(wallet.frozenBalance) }}</span>
                    </div>
                    <div class="detail-item">
                        <span class="label" :style="{ color: vipTextColor }">透支金额</span>
                        <span class="value" :style="{ color: vipTextColor }">{{ formatAmount(wallet.overdraftBalance) }}</span>
                    </div>
                </div>    
        </div>
    </div>

        <!-- 操作按钮 -->
        <div class="action-buttons">
          <button class="action-btn recharge" @click="showRechargeDialog = true" v-if="role === 'USER'">
            <i class="fa fa-plus-circle"></i>
            <span>充值</span>
          </button>
          <button class="action-btn withdraw" @click="showWithdrawDialog = true" v-if="role === 'BUSINESS'">
            <i class="fa fa-minus-circle"></i>
            <span>提现</span>
          </button>
          <button class="action-btn transfer" @click="showTransferDialog = true">
            <i class="fa fa-exchange-alt"></i>
            <span>转账</span>
          </button>
          <!-- 新增还款按钮 -->
          <button class="action-btn repay" @click="showRepayDialog = true" v-if="wallet.overdraftBalance > 0">
            <i class="fa fa-credit-card"></i>
            <span>还款</span>
          </button>
          <button class="action-btn history" @click="viewTransactionHistory">
            <i class="fa fa-history"></i>
            <span>交易记录</span>
          </button>
        </div>
      </div>
  
      <!-- 最近交易 -->
      <div class="recent-transactions-section">
        <div class="section-header">
          <h3>最近交易</h3>
          <span class="view-all" @click="viewTransactionHistory">查看全部</span>
        </div>
        
        <div class="transaction-list">
          <div v-if="recentTransactions.length === 0" class="empty-state">
            <i class="fa fa-wallet"></i>
            <p>暂无交易记录</p>
          </div>
          
          <div v-else>
            <div v-for="transaction in recentTransactions" :key="transaction.id" 
                 class="transaction-item" @click="viewTransactionDetail(transaction)">
              <div class="transaction-icon" :class="getTransactionTypeClass(transaction.txnType)">
                <i :class="getTransactionIcon(transaction.txnType)"></i>
              </div>
              <div class="transaction-info">
                <div class="transaction-title">{{ getTransactionTypeText(transaction.txnType) }}</div>
                <div class="transaction-note">{{ transaction.remark }}</div>
                <div class="transaction-time">{{ formatDate(transaction.createTime) }}</div>
              </div>
              <div class="transaction-amount" :class="getAmountClass(transaction)">
                {{ formatTransactionAmount(transaction) }}
              </div>
            </div>
          </div>
        </div>
      </div>
  
      <!-- 充值对话框 -->
      <div v-if="showRechargeDialog" class="modal-overlay" @click="showRechargeDialog = false">
        <div class="modal-content" @click.stop>
          <div class="modal-header">
            <h3>充值</h3>
            <i class="fa fa-times" @click="showRechargeDialog = false"></i>
          </div>
          <div class="modal-body">
            <div class="amount-selection">
              <div class="amount-options">
                <div v-for="amount in rechargeAmounts" :key="amount" 
                     class="amount-option" :class="{ active: selectedAmount === amount }"
                     @click="selectedAmount = amount">
                  {{ amount }}元
                </div>
              </div>
            </div>
            
            <div class="bonus-info" v-if="rechargeBonus > 0">
              <i class="fa fa-gift"></i>
              <span>充值奖励: {{ formatAmount(rechargeBonus) }}元</span>
            </div>
            
            <div class="payment-methods">
              <h4>选择支付方式</h4>
              <div class="payment-options">
                <div v-for="method in paymentMethods" :key="method.id" 
                     class="payment-option" :class="{ active: selectedPaymentMethod === method.id }"
                     @click="selectedPaymentMethod = method.id">
                  <i :class="method.icon"></i>
                  <span>{{ method.name }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button class="btn-cancel" @click="showRechargeDialog = false">取消</button>
            <button class="btn-confirm" @click="confirmRecharge">确认充值</button>
          </div>
        </div>
      </div>
  
      <!-- 提现对话框 -->
      <div v-if="showWithdrawDialog" class="modal-overlay" @click="showWithdrawDialog = false">
        <div class="modal-content" @click.stop>
          <div class="modal-header">
            <h3>提现</h3>
            <i class="fa fa-times" @click="showWithdrawDialog = false"></i>
          </div>
          <div class="modal-body">
            <div class="withdraw-amount">
              <label>提现金额</label>
              <div class="amount-input">
                <span class="currency">¥</span>
                <input v-model="withdrawAmount" type="number" placeholder="0.00" />
              </div>
              <div class="available-balance">
                可用余额: {{ formatAmount(wallet.balance) }}元
                <span class="withdraw-all" @click="withdrawAll">全部提现</span>
              </div>
            </div>
            
            <div class="fee-info" v-if="withdrawFee > 0">
              <i class="fa fa-info-circle"></i>
              <span>手续费: {{ formatAmount(withdrawFee) }}元</span>
            </div>
            
            <div class="bank-card">
              <h4>提现到</h4>
              <div class="card-options">
                <div v-for="card in bankCards" :key="card.id" 
                     class="card-option" :class="{ active: selectedCardId === card.id }"
                     @click="selectedCardId = card.id">
                  <i class="fa fa-credit-card"></i>
                  <div class="card-info">
                    <div class="bank-name">{{ card.bankName }}</div>
                    <div class="card-number">**** **** **** {{ card.lastFourDigits }}</div>
                  </div>
                </div>
                <div class="add-card" @click="addBankCard">
                  <i class="fa fa-plus"></i>
                  <span>添加银行卡</span>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button class="btn-cancel" @click="showWithdrawDialog = false">取消</button>
            <button class="btn-confirm" @click="confirmWithdraw" 
                    :disabled="!withdrawAmount || withdrawAmount <= 0">
              确认提现
            </button>
          </div>
        </div>
      </div>
  
      <!-- 转账对话框 -->
      <div v-if="showTransferDialog" class="modal-overlay" @click="showTransferDialog = false">
        <div class="modal-content" @click.stop>
          <div class="modal-header">
            <h3>转账</h3>
            <i class="fa fa-times" @click="showTransferDialog = false"></i>
          </div>
          <div class="modal-body">
            <div class="transfer-recipient">
              <label>收款方</label>
              <input v-model="transferRecipient" placeholder="请输入用户ID或手机号" />
            </div>
            <div class="transfer-amount">
              <label>转账金额</label>
              <div class="amount-input">
                <span class="currency">¥</span>
                <input v-model="transferAmount" type="number" placeholder="0.00" />
              </div>
            </div>
            <div class="transfer-note">
              <label>备注 (可选)</label>
              <input v-model="transferNote" placeholder="请输入转账备注" />
            </div>
          </div>
          <div class="modal-footer">
            <button class="btn-cancel" @click="showTransferDialog = false">取消</button>
            <button class="btn-confirm" @click="confirmTransfer" 
                    :disabled="!transferRecipient || !transferAmount || transferAmount <= 0">
              确认转账
            </button>
          </div>
        </div>
      </div>

      <!-- 还款对话框 -->
      <div v-if="showRepayDialog" class="modal-overlay" @click="showRepayDialog = false">
        <div class="modal-content" @click.stop>
          <div class="modal-header">
            <h3>还款</h3>
            <i class="fa fa-times" @click="showRepayDialog = false"></i>
          </div>
          <div class="modal-body">
            <div class="repay-amount">
              <label>还款金额</label>
              <div class="amount-input">
                <span class="currency">¥</span>
                <input v-model="repayAmount" type="number" placeholder="0.00" />
              </div>
              <div class="available-info">
                <div class="info-item">
                  当前透支金额: {{ formatAmount(wallet.overdraftBalance) }}元
                </div>
                <div class="info-item">
                  当前可用余额: {{ formatAmount(wallet.availableBalance) }}元
                </div>
                <span class="repay-all" @click="repayAll">全部还款</span>
              </div>
            </div>
            
            <div class="repay-note">
              <label>备注 (可选)</label>
              <input v-model="repayNote" placeholder="请输入还款备注" />
            </div>
          </div>
          <div class="modal-footer">
            <button class="btn-cancel" @click="showRepayDialog = false">取消</button>
            <button class="btn-confirm" @click="confirmRepay" 
                    :disabled="!repayAmount || repayAmount <= 0 || !canRepay">
              确认还款
            </button>
          </div>
        </div>
      </div>
  
      <!-- VIP详情对话框-->
      <div v-if="showVipDialog" class="modal-overlay" @click="showVipDialog = false">
        <div class="modal-content vip-modal" @click.stop>
            <div class="modal-header">
                <h3>VIP等级详情</h3>
                <i class="fa fa-times" @click="showVipDialog = false"></i>
            </div>
            <div class="modal-body">
                <!-- 当前VIP状态 -->
                <div class="current-vip-status">
                    <div class="current-level">
                        <div class="level-badge" :style="{ background: currentVipInfo.color }">
                            VIP {{ currentVipInfo.level }}
                        </div>
                        <div class="level-info">
                            <div class="level-name">{{ currentVipInfo.name }}</div>
                            <div class="consumption">累计消费: {{ formatAmount(wallet.consumption) }}元</div>
                        </div>
                    </div>
                    
                    <!-- 进度条 -->
                    <div v-if="nextVipInfo" class="progress-section">
                        <div class="progress-label">
                            升级进度 ({{ formatAmount(wallet.consumption - currentVipInfo.consumption) }}/{{ formatAmount(nextVipInfo.consumption - currentVipInfo.consumption) }})
                        </div>
                        <div class="progress-bar">
                            <div class="progress-fill" :style="{ width: progressPercentage + '%' }"></div>
                        </div>
                        <div class="next-level-target">
                            下一等级: {{ nextVipInfo.name }} ({{ formatAmount(nextVipInfo.consumption) }}元)
                        </div>
                    </div>
                    <div v-else class="max-level">
                        🎉 恭喜您已达到最高VIP等级!
                    </div>
                </div>

                <!-- VIP等级表格 -->
                <div class="vip-table">
                    <h4>VIP等级权益</h4>
                    <div class="table-header">
                        <div class="col-level">等级</div>
                        <div class="col-name">会员名称</div>
                        <div class="col-consumption">消费要求</div>
                        <div class="col-overdraft">透支额度</div>
                    </div>
                    <div class="table-body">
                        <div v-for="level in vipLevels" :key="level.level" 
                            class="table-row" :class="{ active: level.level === currentVipInfo.level }">
                            <div class="col-level">
                                <span class="level-badge-small" :style="{ background: level.color }">
                                    VIP {{ level.level }}
                                </span>
                            </div>
                            <div class="col-name">{{ level.name }}</div>
                            <div class="col-consumption">{{ formatAmount(level.consumption) }}元</div>
                            <div class="col-overdraft">{{ formatAmount(level.consumption) }}元</div>
                        </div>
                    </div>
                </div>

                <!-- 权益说明 -->
                <div class="benefits-info">
                    <h4>VIP权益说明</h4>
                    <ul>
                        <li>💳 透支额度为累计消费金额的1倍</li>
                        <li>📈 等级越高，透支额度越大</li>
                        <li>🎁 更多专属权益开发中...</li>
                    </ul>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn-confirm" @click="showVipDialog = false">我知道了</button>
            </div>
        </div>
      </div>
    </div>
</template>

<script>
import { ElMessage, ElMessageBox } from 'element-plus'

export default {
  name: 'Wallet',
  data() {
    return {
      user: {},
      wallet: {
        balance: 0,
        availableBalance: 0,
        frozenBalance: 0,
        overdraftBalance: 0,
        overdraftLimit: 0,
        consumption: 0,
        vip: 0
      },
      vipInfo: null,
      recentTransactions: [],
      showVipDialog: false,
      showRechargeDialog: false,
      showWithdrawDialog: false,
      showTransferDialog: false,
      showRepayDialog: false, // 新增：还款对话框显示状态
      selectedAmount: 0,
      selectedPaymentMethod: 'alipay',
      withdrawAmount: '',
      selectedCardId: '',
      transferRecipient: '',
      transferAmount: '',
      transferNote: '',
      repayAmount: '', // 新增：还款金额
      repayNote: '', // 新增：还款备注
      rechargeAmounts: [],
      awards: [],
      role: '',
      loading: false,
      token: '',
      
      // VIP等级配置
  vipLevels: [
    { 
      level: 0, 
      name: '普通会员', 
      consumption: 0, 
      color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' 
    },
    { 
      level: 1, 
      name: '青铜会员', 
      consumption: 500, 
      color: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)' 
    },
    { 
      level: 2, 
      name: '白银会员', 
      consumption: 2000, 
      color: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)' 
    },
    { 
      level: 3, 
      name: '黄金会员', 
      consumption: 5000, 
      color: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)' 
    },
    { 
      level: 4, 
      name: '铂金会员', 
      consumption: 12000, 
      color: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)' 
    },
    { 
      level: 5, 
      name: '钻石会员', 
      consumption: 30000, 
      color: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 50%, #a8edea 100%)' 
    }
  ],
        
      // 支付方式
      paymentMethods: [
        { id: 'alipay', name: '支付宝', icon: 'fab fa-alipay' },
        { id: 'wechat', name: '微信支付', icon: 'fab fa-weixin' },
        { id: 'bank', name: '银行卡', icon: 'fa fa-credit-card' }
      ],
      
      // 银行卡
      bankCards: [
        { id: '1', bankName: '中国工商银行', lastFourDigits: '1234' },
        { id: '2', bankName: '中国建设银行', lastFourDigits: '5678' }
      ]
    }
  },
  
  computed: {
    // 当前VIP等级信息
    currentVipInfo() {
      const consumption = this.wallet.consumption || 0
      for (let i = this.vipLevels.length - 1; i >= 0; i--) {
        if (consumption >= this.vipLevels[i].consumption) {
          return this.vipLevels[i]
        }
      }
      return this.vipLevels[0]
    },
    
    // 下一级VIP信息
    nextVipInfo() {
      const currentLevel = this.currentVipInfo.level
      if (currentLevel < this.vipLevels.length - 1) {
        return this.vipLevels[currentLevel + 1]
      }
      return null
    },
    
    // 距离下一级还需要消费的金额
    nextLevelNeed() {
      if (!this.nextVipInfo) return 0
      return this.nextVipInfo.consumption - (this.wallet.consumption || 0)
    },
    
    // 进度百分比
    progressPercentage() {
      const currentConsumption = this.wallet.consumption || 0
      const currentLevel = this.currentVipInfo
      const nextLevel = this.nextVipInfo
      
      if (!nextLevel) return 100
      
      const currentLevelConsumption = currentLevel.consumption
      const nextLevelConsumption = nextLevel.consumption
      const range = nextLevelConsumption - currentLevelConsumption
      const progress = currentConsumption - currentLevelConsumption
      
      return Math.min((progress / range) * 100, 100)
    },
    walletCardStyle() {
    return {
      background: this.currentVipInfo.color,
      // 添加阴影效果，让卡片更有层次感
      boxShadow: `0 10px 25px ${this.getShadowColor(this.currentVipInfo.color)}`
    }
    },
    // VIP徽章样式
    vipBadgeStyle() {
      return {
        background: 'rgba(255, 255, 255, 0.9)',
        color: this.getContrastColor(this.currentVipInfo.color)
      }
    },
    
    // VIP文字颜色（根据背景色自动调整对比度）
    vipTextColor() {
      return this.getContrastColor(this.currentVipInfo.color)
    },
    // 充值奖励
    rechargeBonus() {
      const amount = this.selectedAmount
      if (!amount) return 0
      
      // 查找当前选择的充值金额对应的奖励
      const award = this.awards.find(item => 
        parseInt(parseFloat(item.recharge_amount)) === parseInt(amount)
      )
      
      return award ? parseFloat(award.award_amount) : 0
    },
    
    // 提现手续费
    withdrawFee() {
      const amount = parseFloat(this.withdrawAmount) || 0
      return Math.max(amount * 0.05, 1)
    },
    
    // 新增：是否可以还款
    canRepay() {
      const amount = parseFloat(this.repayAmount) || 0
      return amount <= this.wallet.availableBalance && amount <= this.wallet.overdraftBalance
    }
  },
  
  created() {
    this.token = localStorage.getItem('token')
    this.fetchUserInfo()
    this.fetchRechargeOptions()
    this.fetchAuthority()
  },
  
  methods: {
  // 获取阴影颜色（从渐变色中提取主色）
  getShadowColor(gradient) {
    // 从渐变色字符串中提取颜色
    const colors = gradient.match(/#[a-fA-F0-9]{6}|#[a-fA-F0-9]{3}/g)
    if (colors && colors.length > 0) {
      return colors[0] + '40' // 添加透明度
    }
    return 'rgba(0, 0, 0, 0.3)' // 默认阴影
  },
  
  // 获取对比色（确保文字在背景上可读）
  getContrastColor(backgroundColor) {
    // 如果是渐变色，取第一个颜色作为基准
    let color = backgroundColor
    if (backgroundColor.includes('gradient')) {
      const colors = backgroundColor.match(/#[a-fA-F0-9]{6}|#[a-fA-F0-9]{3}/g)
      if (colors && colors.length > 0) {
        color = colors[0]
      }
    }
    
    // 简化的亮度计算
    const hex = color.replace('#', '')
    const r = parseInt(hex.substr(0, 2), 16)
    const g = parseInt(hex.substr(2, 2), 16)
    const b = parseInt(hex.substr(4, 2), 16)
    
    // 计算相对亮度
    const brightness = (r * 299 + g * 587 + b * 114) / 1000
    
    // 根据亮度返回黑色或白色
    return brightness > 128 ? '#2d3748' : '#ffffff'
    },
    // 获取充值选项
    fetchRechargeOptions() {
      this.$axios.get('/awards/get', {
        headers: {
          'Authorization': `Bearer ${this.token}`
        }
      }).then(response => {
        this.awards = response.data
        // 将后端返回的 recharge_amount 转换为整数
        this.rechargeAmounts = this.awards.map(item => 
          parseInt(parseFloat(item.recharge_amount))
        )
      }).catch(error => {
        console.error('获取充值选项失败:', error)
        // 失败时使用默认值
        this.rechargeAmounts = [50, 100, 200, 500, 1000]
      })
    },
    
    // 获取用户权限
    fetchAuthority() {
      this.$axios.get('/getAuthority', {
        headers: {
          'Authorization': `Bearer ${this.token}`
        }
      }).then(response => {
        this.role = response.data
      }).catch(error => {
        console.error('获取身份失败:', error)
      })
    },
    
    // 获取用户信息
    fetchUserInfo() {
      this.$axios.get(`/user`, {
        headers: {
          'Authorization': `Bearer ${this.token}`
        }
      }).then(response => {
        this.user = response.data.data
        this.fetchWalletData()
        this.fetchRecentTransactions()
      }).catch(error => {
        console.error('获取用户信息失败:', error)
      })
    },
    
    // 获取钱包数据
    fetchWalletData() {
      this.$axios.get('/wallet', {
        headers: {
          'Authorization': `Bearer ${this.token}`
        }
      }).then(response => {
        const walletData = response.data
        const overdraftLimit = walletData.consumption * 0.1
        
        // 映射后端字段到前端字段
        this.wallet = {
          balance: walletData.balance + (walletData.frozen || 0),
          availableBalance: walletData.balance,
          frozenBalance: walletData.frozen || 0,
          overdraftBalance: walletData.overdraft || 0,
          overdraftLimit: overdraftLimit,
          consumption: walletData.consumption || 0,
          vip: walletData.vip || 0
        }
      }).catch(error => {
        console.error('获取钱包数据失败:', error)
        ElMessage.error('获取钱包数据失败')
      })
    },
    
    // 获取最近交易记录
    fetchRecentTransactions() {
      this.$axios.get('/wallet/transactions',{
        headers: {
          'Authorization': `Bearer ${this.token}`
        }
      }).then(response => {
        this.recentTransactions = response.data.slice(0, 4)
      }).catch(error => {
        console.error('获取交易记录失败:', error)
      })
    },
    
    // 判断是否为收入交易
    isIncomeTransaction(transaction) {
      return this.user.id == transaction.toId;
    },
    
    // 格式化金额
    formatAmount(amount) {
      return parseFloat(amount || 0).toFixed(2)
    },
    
    // 格式化日期
    formatDate(dateString) {
      const date = new Date(dateString)
      return `${date.getMonth() + 1}/${date.getDate()} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
    },
    
    // 获取交易类型样式类
    getTransactionTypeClass(type) {
      const classMap = {
        recharge: 'recharge',
        pay: 'payment',
        transfer: 'transfer',
        withdraw: 'withdraw',
        refund: 'refund'
      }
      return classMap[type] || 'default'
    },
    
    // 获取交易图标
    getTransactionIcon(type) {
      const iconMap = {
        recharge: 'fa fa-plus-circle',
        pay: 'fa fa-shopping-cart',
        transfer: 'fa fa-exchange-alt',
        withdraw: 'fa fa-minus-circle',
        refund: 'fa fa-undo'
      }
      return iconMap[type] || 'fa fa-exchange'
    },
    
    // 获取交易类型文本
    getTransactionTypeText(type) {
      const textMap = {
        recharge: '充值',
        pay: '消费',
        transfer: '转账',
        withdraw: '提现',
        refund: '退款'
      }
      return textMap[type] || '交易'
    },
    
    // 获取金额样式类
    getAmountClass(transaction) {
      // 使用完整交易对象判断
      if (this.isIncomeTransaction(transaction)) {
        return 'positive';
      }
      return 'negative';
    },
    
    // 格式化交易金额显示
    formatTransactionAmount(transaction) {
      const amount = parseFloat(transaction.aggregateAmount || transaction.amount || 0);
      const sign = this.isIncomeTransaction(transaction) ? '+' : '-';
      return `${sign}¥${Math.abs(amount).toFixed(2)}`;
    },
    
    // 查看交易历史
    viewTransactionHistory() {
      this.$router.push('/wallet/transactions')
    },
    
    // 查看交易详情
    viewTransactionDetail(transaction) {
      console.log('查看交易详情:', transaction)
    },
    
    // 提现全部金额
    withdrawAll() {
      this.withdrawAmount = this.wallet.balance
    },
    
    // 新增：全部还款
    repayAll() {
      // 还款金额不能超过可用余额和透支金额的最小值
      this.repayAmount = Math.min(this.wallet.availableBalance, this.wallet.overdraftBalance)
    },
    
    // 添加银行卡
    addBankCard() {
      ElMessage.info('添加银行卡功能开发中')
    },
    
    // 确认充值
    confirmRecharge() {
      const amount = this.selectedAmount
      if (!amount || amount <= 0) {
        ElMessage.warning('请选择充值金额')
        return
      }
      
      const totalAmount = parseFloat(amount) + this.rechargeBonus
      
      ElMessageBox.confirm(
        `确认充值¥${this.formatAmount(amount)}元？充值奖励: ¥${this.formatAmount(this.rechargeBonus)}元，总计: ¥${this.formatAmount(totalAmount)}元`,
        '确认充值',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        this.$axios.post('/wallet/recharge', {}, {
          params: {
            amount: totalAmount
          },
          headers: {
            'Authorization': `Bearer ${this.token}`
          }
        }).then(response => {
          ElMessage.success('充值成功')
          this.showRechargeDialog = false
          this.fetchWalletData()
          this.fetchRecentTransactions()
          this.selectedAmount = 0
        }).catch(error => {
          console.error('充值失败:', error)
          ElMessage.error('充值失败，请稍后重试')
        })
      })
    },
    
    // 确认提现
    confirmWithdraw() {
      const amount = parseFloat(this.withdrawAmount)
      if (!amount || amount <= 0) {
        ElMessage.warning('请输入提现金额')
        return
      }
      
      if (amount > this.wallet.balance) {
        ElMessage.warning('提现金额超过可用余额')
        return
      }
      
      const totalDeduction = amount + this.withdrawFee
      const actualAmount = amount - this.withdrawFee
      
      ElMessageBox.confirm(
        `确认提现¥${this.formatAmount(amount)}元？手续费: ¥${this.formatAmount(this.withdrawFee)}元，实际到账: ¥${this.formatAmount(actualAmount)}元`,
        '确认提现',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        this.$axios.post('/wallet/withdraw', {}, {
          params: {
            amount: amount
          },
          headers: {
            'Authorization': `Bearer ${this.token}`
          }
        }).then(response => {
          ElMessage.success('提现申请已提交，预计1-3个工作日到账')
          this.showWithdrawDialog = false
          this.fetchWalletData()
          this.fetchRecentTransactions()
          this.withdrawAmount = ''
        }).catch(error => {
          console.error('提现失败:', error)
          ElMessage.error('提现失败，请稍后重试')
        })
      })
    },
    goBack() {
      if (this.role === 'USER') {
        this.$router.push('/userProfile');
      } else if (this.role === 'BUSINESS') {
        this.$router.push('/mine');
      } else {
        // 角色未知时返回上一页
        this.$router.back();
      }
    },
    
    // 确认转账
    confirmTransfer() {
      const amount = parseFloat(this.transferAmount)
      if (!amount || amount <= 0) {
        ElMessage.warning('请输入转账金额')
        return
      }
      
      if (amount > this.wallet.balance) {
        ElMessage.warning('转账金额超过可用余额')
        return
      }

      if (Number(this.transferRecipient) === Number(this.user.id)) {
        ElMessage.warning('不能向自己转账')
        return
      }
      
      ElMessageBox.confirm(
        `确认向用户 ${this.transferRecipient} 转账¥${this.formatAmount(amount)}元？`,
        '确认转账',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        this.$axios.post('/wallet/transfer', {}, {
          params: {
            fromUserId: this.user.id,
            toUserId: this.transferRecipient,
            amount: amount,
            remark: this.transferNote
          },
          headers: {
            'Authorization': `Bearer ${this.token}`
          }
        }).then(response => {
          ElMessage.success('转账成功')
          this.showTransferDialog = false
          this.fetchWalletData()
          this.fetchRecentTransactions()
          this.transferRecipient = ''
          this.transferAmount = ''
          this.transferNote = ''
        }).catch(error => {
          console.error('转账失败:', error)
          ElMessage.error('转账失败，请稍后重试')
        })
      })
    },

    // 新增：确认还款
    confirmRepay() {
      const amount = parseFloat(this.repayAmount)
      if (!amount || amount <= 0) {
        ElMessage.warning('请输入还款金额')
        return
      }
      
      // 检查还款金额是否超过可用余额
      if (amount > this.wallet.availableBalance) {
        ElMessage.warning('还款金额超过可用余额')
        return
      }
      
      // 检查还款金额是否超过透支金额
      if (amount > this.wallet.overdraftBalance) {
        ElMessage.warning('还款金额超过透支金额')
        return
      }
      
      ElMessageBox.confirm(
        `确认还款¥${this.formatAmount(amount)}元？`,
        '确认还款',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        this.$axios.post(`/wallet/repay`, {}, {
          params: {
            amount: amount
          },
          headers: {
            'Authorization': `Bearer ${this.token}`
          }
        }).then(response => {
          ElMessage.success('还款成功')
          this.showRepayDialog = false
          this.fetchWalletData()
          this.fetchRecentTransactions()
          this.repayAmount = ''
          this.repayNote = ''
        }).catch(error => {
          console.error('还款失败:', error)
          ElMessage.error('还款失败，请稍后重试')
        })
      })
    }
  }
}
</script>

<style scoped>
/* 优化后的CSS代码 */
.wrapper {
  width: 100%;
  min-height: calc(100vh - 16vw);
  padding-bottom: 18vw;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

/****************** header部分 ******************/
.wrapper header {
  width: 100%;
  height: 12vw;
  background: linear-gradient(135deg, #0097FF 0%, #0056b3 100%);
  color: #fff;
  font-size: 4.8vw;
  position: relative;
  left: 0;
  top: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 15px rgba(0, 151, 255, 0.3);
}

.wrapper header .home-icon {
  position: absolute;
  right: 4vw;
  top: 50%;
  transform: translateY(-50%);
  font-size: 5vw;
  color: white;
  cursor: pointer;
  transition: color 0.2s;
}

/* 钱包概览容器 */
.wallet-overview-section {
  padding: 4vw;
  width: 100%;
  box-sizing: border-box;
}

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8vw 4vw;
  color: #a0aec0;
}

.loading-state i {
  font-size: 8vw;
  margin-bottom: 4vw;
}

.loading-state span {
  font-size: 4vw;
}

/* 余额卡片样式 - 修复对齐 */
.balance-card {
  border-radius: 20px;
  padding: 6vw 4vw;
  color: white;
  margin-bottom: 4vw;
  position: relative;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
  transition: all 0.3s ease;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.balance-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
  background-size: 20px 20px;
  transform: rotate(30deg);
}

.balance-label {
  font-size: 3.8vw;
  opacity: 0.9;
  margin-bottom: 2vw;
  font-weight: 600;
}

.balance-amount {
  font-size: 10vw;
  font-weight: 800;
  margin-bottom: 4vw;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* VIP信息样式 */
.vip-info {
  margin: 3vw 0;
  padding: 3vw;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.vip-info:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
}

.vip-badge {
  display: flex;
  align-items: center;
  margin-bottom: 2vw;
}

.vip-level {
  padding: 1vw 2vw;
  border-radius: 20px;
  font-size: 3.2vw;
  font-weight: 600;
  margin-right: 2vw;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.9);
  color: #2d3748;
}

.vip-name {
  flex: 1;
  font-size: 4vw;
  font-weight: 600;
}

.vip-info-icon {
  font-size: 4.5vw;
  opacity: 0.8;
}

.consumption-info, .next-level-info {
  font-size: 3.5vw;
  opacity: 0.9;
  margin-bottom: 1vw;
}

/* 余额详情 - 修复对齐 */
.balance-details {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 3vw;
  margin-top: 4vw;
}

.detail-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 28%;
  text-align: center;
}

.detail-item .label {
  font-size: 3.2vw;
  opacity: 0.8;
  margin-bottom: 1vw;
  font-weight: 500;
}

.detail-item .value {
  font-size: 4vw;
  font-weight: 700;
}

/****************** 操作按钮 - 修复网格对齐 ******************/
.action-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3vw;
  width: 100%;
  margin: 0 auto;
}

.action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: white;
  border: none;
  border-radius: 16px;
  padding: 4vw 2vw;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  min-height: 20vw;
}

.action-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transition: left 0.5s;
}

.action-btn:hover::before {
  left: 100%;
}

.action-btn:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.action-btn i {
  font-size: 7vw;
  margin-bottom: 2vw;
  transition: transform 0.3s ease;
}

.action-btn:hover i {
  transform: scale(1.2);
}

.action-btn span {
  font-size: 3.5vw;
  font-weight: 600;
  white-space: nowrap;
}

/* 按钮颜色 */
.action-btn.recharge i { 
  background: linear-gradient(135deg, #4CAF50, #45a049);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.action-btn.withdraw i { 
  background: linear-gradient(135deg, #FF6B6B, #e53935);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.action-btn.transfer i { 
  background: linear-gradient(135deg, #2196F3, #1976d2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.action-btn.repay i { 
  background: linear-gradient(135deg, #FF9800, #f57c00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.action-btn.history i { 
  background: linear-gradient(135deg, #9C27B0, #7b1fa2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/****************** 最近交易 - 修复对齐 ******************/
.recent-transactions-section {
  background: white;
  margin: 4vw;
  border-radius: 20px;
  padding: 4vw;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  width: calc(100% - 8vw);
  box-sizing: border-box;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4vw;
  padding-bottom: 3vw;
  border-bottom: 1px solid #e2e8f0;
}

.section-header h3 {
  font-size: 4.5vw;
  color: #2d3748;
  margin: 0;
  font-weight: 700;
}

.view-all {
  font-size: 3.8vw;
  color: #0097FF;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
}

.view-all:hover {
  color: #0056b3;
  transform: translateX(3px);
}

.transaction-list {
  max-height: 60vw;
  overflow-y: auto;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8vw 4vw;
  color: #a0aec0;
}

.empty-state i {
  font-size: 15vw;
  margin-bottom: 4vw;
  opacity: 0.6;
}

.empty-state p {
  font-size: 4vw;
  margin: 0;
  font-weight: 500;
}

.transaction-item {
  display: flex;
  align-items: center;
  padding: 3.5vw 0;
  border-bottom: 1px solid #edf2f7;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.transaction-item:last-child {
  border-bottom: none;
}

.transaction-item:hover {
  background-color: #f7fafc;
  transform: translateX(5px);
  border-radius: 10px;
  padding: 3.5vw 2vw;
}

.transaction-icon {
  width: 10vw;
  height: 10vw;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 3vw;
  font-size: 4.5vw;
  color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.transaction-item:hover .transaction-icon {
  transform: scale(1.1) rotate(10deg);
}

.transaction-icon.recharge { 
  background: linear-gradient(135deg, #4CAF50, #45a049);
}
.transaction-icon.payment { 
  background: linear-gradient(135deg, #FF9800, #f57c00);
}
.transaction-icon.transfer { 
  background: linear-gradient(135deg, #2196F3, #1976d2);
}
.transaction-icon.withdraw { 
  background: linear-gradient(135deg, #FF6B6B, #e53935);
}
.transaction-icon.refund { 
  background: linear-gradient(135deg, #9C27B0, #7b1fa2);
}
.transaction-icon.default { 
  background: linear-gradient(135deg, #607D8B, #455a64);
}

.transaction-info {
  flex: 1;
  min-width: 0;
}

.transaction-title {
  font-size: 4.2vw;
  color: #2d3748;
  margin-bottom: 1vw;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.transaction-note {
  font-size: 3.5vw;
  color: #718096;
  margin-bottom: 1vw;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.transaction-time {
  font-size: 3.2vw;
  color: #a0aec0;
  font-weight: 500;
}

.transaction-amount {
  font-size: 4.5vw;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  flex-shrink: 0;
  margin-left: 2vw;
}

.transaction-item:hover .transaction-amount {
  transform: scale(1.05);
}

.transaction-amount.positive { 
  background: linear-gradient(135deg, #4CAF50, #45a049);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.transaction-amount.negative { 
  background: linear-gradient(135deg, #FF6B6B, #e53935);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/****************** 模态框样式优化 ******************/
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 4vw;
  animation: overlayFadeIn 0.3s ease;
}

@keyframes overlayFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-content {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 20px;
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  animation: modalSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(-30px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5vw 4vw;
  border-bottom: 1px solid #e2e8f0;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-radius: 20px 20px 0 0;
}

.modal-header h3 {
  font-size: 5vw;
  margin: 0;
  color: #1e293b;
  font-weight: 700;
}

.modal-header i {
  font-size: 5.5vw;
  color: #64748b;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 2vw;
  border-radius: 50%;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.modal-header i:hover {
  color: #ff4757;
  background: #fff5f5;
  transform: rotate(90deg);
}

.modal-body {
  padding: 5vw 4vw;
}

.modal-footer {
  display: flex;
  padding: 4vw;
  border-top: 1px solid #e2e8f0;
  gap: 3vw;
  background: #f8fafc;
  border-radius: 0 0 20px 20px;
}

.btn-cancel, .btn-confirm {
  flex: 1;
  padding: 4vw;
  border: none;
  border-radius: 12px;
  font-size: 4.2vw;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.btn-cancel {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  color: #64748b;
  border: 1px solid #cbd5e1;
}

.btn-cancel:hover {
  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.btn-confirm {
  background: linear-gradient(135deg, #0097FF 0%, #0056b3 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(0, 151, 255, 0.3);
}

.btn-confirm:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 151, 255, 0.4);
}

.btn-confirm:disabled {
  background: #cbd5e0;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/****************** 响应式设计 - 桌面端优化 ******************/
@media (min-width: 768px) {
  .wrapper {
    max-width: 500px;
    margin: 0 auto;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.1);
    min-height: 100vh;
    padding-bottom: 80px;
  }
  
  .wrapper header {
    height: 60px;
    border-radius: 0;
  }
  
  .wrapper header p {
    font-size: 20px;
  }
  
  .wallet-overview-section {
    padding: 80px 20px 20px;
  }
  
  .balance-card {
    padding: 30px;
    margin-bottom: 20px;
  }
  
  .balance-label {
    font-size: 16px;
  }
  
  .balance-amount {
    font-size: 48px;
  }
  
  .detail-item .label {
    font-size: 14px;
  }
  
  .detail-item .value {
    font-size: 16px;
  }
  
  .action-buttons {
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
  }
  
  .action-btn {
    padding: 20px 10px;
    min-height: 100px;
    border-radius: 16px;
  }
  
  .action-btn i {
    font-size: 32px;
  }
  
  .action-btn span {
    font-size: 14px;
  }
  
  .recent-transactions-section {
    margin: 20px;
    padding: 20px;
    width: calc(100% - 40px);
  }
  
  .section-header h3 {
    font-size: 18px;
  }
  
  .view-all {
    font-size: 14px;
  }
  
  .transaction-item {
    padding: 15px 0;
  }
  
  .transaction-icon {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
  
  .transaction-title {
    font-size: 16px;
  }
  
  .transaction-note {
    font-size: 14px;
  }
  
  .transaction-time {
    font-size: 12px;
  }
  
  .transaction-amount {
    font-size: 16px;
  }
  
  /* VIP信息桌面端优化 */
  .vip-info {
    margin: 15px 0;
    padding: 15px;
  }
  
  .vip-level {
    padding: 5px 10px;
    font-size: 14px;
  }
  
  .vip-name {
    font-size: 16px;
  }
  
  .vip-info-icon {
    font-size: 18px;
  }
  
  .consumption-info, .next-level-info {
    font-size: 14px;
  }
  
  /* 模态框桌面端优化 */
  .modal-overlay {
    padding: 20px;
  }
  
  .modal-header {
    padding: 25px 20px;
  }
  
  .modal-header h3 {
    font-size: 20px;
  }
  
  .modal-header i {
    font-size: 24px;
    padding: 8px;
  }
  
  .modal-body {
    padding: 25px 20px;
  }
  
  .modal-footer {
    padding: 20px;
    gap: 15px;
  }
  
  .btn-cancel, .btn-confirm {
    padding: 15px;
    font-size: 14px;
  }
}

/* 还款相关样式 */
.repay-amount {
  margin-bottom: 4vw;
}

.repay-amount label {
  display: block;
  font-size: 3.8vw;
  color: #4a5568;
  margin-bottom: 2vw;
  font-weight: 600;
}

.available-info {
  margin-top: 3vw;
}

.info-item {
  font-size: 3.5vw;
  color: #718096;
  margin-bottom: 1.5vw;
  font-weight: 500;
}

.repay-all {
  color: #0097FF;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  font-size: 3.5vw;
}

.repay-all:hover {
  color: #0056b3;
  transform: scale(1.05);
}

.repay-note {
  margin-bottom: 4vw;
}

.repay-note label {
  display: block;
  font-size: 3.8vw;
  color: #4a5568;
  margin-bottom: 2vw;
  font-weight: 600;
}

.repay-note input {
  width: 100%;
  padding: 3.5vw;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  font-size: 4vw;
  transition: all 0.3s ease;
  background: white;
}

.repay-note input:focus {
  outline: none;
  border-color: #0097FF;
  box-shadow: 0 0 0 3px rgba(0, 151, 255, 0.1);
  transform: translateY(-1px);
}

/* 响应式设计中的还款样式 */
@media (min-width: 768px) {
  .repay-amount label {
    font-size: 16px;
  }
  
  .info-item {
    font-size: 14px;
  }
  
  .repay-all {
    font-size: 14px;
  }
  
  .repay-note label {
    font-size: 16px;
  }
  
  .repay-note input {
    padding: 15px;
    font-size: 16px;
  }
}
/* VIP信息样式 */
.vip-info {
  margin: 3vw 0;
  padding: 3vw;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.vip-info:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.vip-badge {
  display: flex;
  align-items: center;
  margin-bottom: 2.5vw;
}

.vip-level {
  padding: 1.2vw 2.5vw;
  border-radius: 25px;
  font-size: 3.2vw;
  font-weight: 700;
  margin-right: 3vw;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.95);
  color: #2d3748;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.vip-name {
  flex: 1;
  font-size: 4.2vw;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.vip-info-icon {
  font-size: 4.8vw;
  opacity: 0.9;
  transition: all 0.3s ease;
}

.vip-info:hover .vip-info-icon {
  transform: scale(1.1);
  opacity: 1;
}

.consumption-info, .next-level-info {
  font-size: 3.6vw;
  opacity: 0.95;
  margin-bottom: 1.5vw;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* VIP详情对话框样式 */
.vip-modal {
  max-width: 90vw;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 24px;
  overflow: hidden;
}

.vip-modal .modal-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-bottom: none;
  padding: 5vw 4vw;
}

.vip-modal .modal-header h3 {
  color: white;
  font-size: 5.2vw;
  font-weight: 700;
}

.vip-modal .modal-header i {
  color: white;
  background: rgba(255, 255, 255, 0.2);
}

.vip-modal .modal-header i:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* 当前VIP状态 */
.current-vip-status {
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
  border-radius: 16px;
  padding: 4vw;
  margin-bottom: 4vw;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.1);
}

.current-level {
  display: flex;
  align-items: center;
  margin-bottom: 3vw;
}

.level-badge {
  padding: 2.5vw 4vw;
  border-radius: 30px;
  color: white;
  font-weight: 700;
  font-size: 4vw;
  margin-right: 3vw;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.3);
  min-width: 20vw;
  text-align: center;
}

.level-info {
  flex: 1;
}

.level-name {
  font-size: 4.8vw;
  font-weight: 700;
  color: #2d3748;
  margin-bottom: 1vw;
}

.consumption {
  font-size: 3.8vw;
  color: #718096;
  font-weight: 500;
}

/* 进度条样式 */
.progress-section {
  margin-top: 4vw;
  padding-top: 3vw;
  border-top: 1px solid #e2e8f0;
}

.progress-label {
  font-size: 3.6vw;
  color: #4a5568;
  margin-bottom: 2.5vw;
  font-weight: 600;
  text-align: center;
}

.progress-bar {
  width: 100%;
  height: 3vw;
  background: #e2e8f0;
  border-radius: 15px;
  overflow: hidden;
  margin-bottom: 2.5vw;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.progress-fill {
  height: 100%;
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
  border-radius: 15px;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

.next-level-target {
  font-size: 3.6vw;
  color: #4a5568;
  text-align: center;
  font-weight: 500;
}

.max-level {
  text-align: center;
  font-size: 4.5vw;
  color: #4CAF50;
  font-weight: 700;
  padding: 4vw 0;
  background: linear-gradient(135deg, #f0fff4 0%, #c6f6d5 100%);
  border-radius: 12px;
  margin-top: 3vw;
  border: 1px solid #9ae6b4;
}

/* VIP表格样式 */
.vip-table {
  margin-bottom: 4vw;
  background: white;
  border-radius: 16px;
  padding: 4vw;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.vip-table h4 {
  font-size: 4.5vw;
  color: #2d3748;
  margin-bottom: 3vw;
  font-weight: 700;
  text-align: center;
}

.table-header {
  display: grid;
  grid-template-columns: 1fr 1fr 1.5fr 1.5fr;
  gap: 2vw;
  padding: 3vw;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  font-weight: 600;
  font-size: 3.5vw;
  color: white;
  margin-bottom: 2vw;
}

.table-body {
  max-height: 50vw;
  overflow-y: auto;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

.table-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1.5fr 1.5fr;
  gap: 2vw;
  padding: 3vw;
  border-bottom: 1px solid #e2e8f0;
  transition: all 0.3s ease;
  background: white;
}

.table-row:last-child {
  border-bottom: none;
}

.table-row.active {
  background: linear-gradient(135deg, #ebf8ff 0%, #bee3f8 100%);
  border-left: 4px solid #0097FF;
  transform: scale(1.02);
  box-shadow: 0 4px 15px rgba(0, 151, 255, 0.2);
}

.table-row:hover {
  background: #f7fafc;
  transform: translateX(5px);
}

.col-level, .col-name, .col-consumption, .col-overdraft {
  display: flex;
  align-items: center;
  font-size: 3.6vw;
  color: #4a5568;
  font-weight: 500;
}

.level-badge-small {
  padding: 1.2vw 2.5vw;
  border-radius: 20px;
  color: white;
  font-size: 3.2vw;
  font-weight: 600;
  text-align: center;
  min-width: 15vw;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* 权益说明样式 */
.benefits-info {
  background: linear-gradient(135deg, #f0fff4 0%, #e6ffed 100%);
  border-radius: 16px;
  padding: 4vw;
  border-left: 6px solid #48bb78;
  box-shadow: 0 4px 20px rgba(72, 187, 120, 0.1);
}

.benefits-info h4 {
  font-size: 4.2vw;
  color: #2d3748;
  margin-bottom: 3vw;
  font-weight: 700;
  text-align: center;
}

.benefits-info ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.benefits-info li {
  font-size: 3.8vw;
  color: #2d3748;
  margin-bottom: 2.5vw;
  padding: 2.5vw 3vw;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 10px;
  font-weight: 500;
  transition: all 0.3s ease;
  border: 1px solid rgba(72, 187, 120, 0.2);
}

.benefits-info li:hover {
  background: white;
  transform: translateX(5px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.benefits-info li:last-child {
  margin-bottom: 0;
}

/* 桌面端响应式优化 */
@media (min-width: 768px) {
  .vip-info {
    margin: 15px 0;
    padding: 15px;
  }
  
  .vip-level {
    padding: 6px 12px;
    font-size: 14px;
  }
  
  .vip-name {
    font-size: 16px;
  }
  
  .vip-info-icon {
    font-size: 18px;
  }
  
  .consumption-info, .next-level-info {
    font-size: 14px;
  }
  
  .vip-modal {
    max-width: 600px;
  }
  
  .vip-modal .modal-header h3 {
    font-size: 20px;
  }
  
  .level-badge {
    padding: 10px 20px;
    font-size: 16px;
    min-width: 80px;
  }
  
  .level-name {
    font-size: 18px;
  }
  
  .consumption {
    font-size: 14px;
  }
  
  .progress-label {
    font-size: 14px;
  }
  
  .progress-bar {
    height: 8px;
  }
  
  .next-level-target {
    font-size: 14px;
  }
  
  .max-level {
    font-size: 16px;
    padding: 15px 0;
  }
  
  .vip-table h4 {
    font-size: 18px;
  }
  
  .table-header {
    font-size: 14px;
    padding: 12px 15px;
  }
  
  .table-row {
    padding: 12px 15px;
  }
  
  .col-level, .col-name, .col-consumption, .col-overdraft {
    font-size: 14px;
  }
  
  .level-badge-small {
    padding: 5px 10px;
    font-size: 12px;
    min-width: 60px;
  }
  
  .benefits-info {
    padding: 20px;
  }
  
  .benefits-info h4 {
    font-size: 18px;
  }
  
  .benefits-info li {
    font-size: 14px;
    padding: 10px 15px;
    margin-bottom: 10px;
  }
}
/****************** 操作按钮 - 优化版 ******************/
.action-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3vw;
  width: 100%;
  margin: 0 auto;
}

.action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 2px solid #e2e8f0;
  border-radius: 20px;
  padding: 4vw 2vw;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  min-height: 20vw;
}

.action-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  transition: left 0.6s;
}

.action-btn:hover::before {
  left: 100%;
}

.action-btn:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  border-color: #cbd5e1;
}

.action-btn:active {
  transform: translateY(-2px) scale(1);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.action-btn i {
  font-size: 7.5vw;
  margin-bottom: 2.5vw;
  transition: all 0.3s ease;
  position: relative;
  z-index: 2;
}

.action-btn:hover i {
  transform: scale(1.25) rotate(5deg);
}

.action-btn span {
  font-size: 3.8vw;
  font-weight: 700;
  white-space: nowrap;
  position: relative;
  z-index: 2;
  background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 按钮颜色优化 */
.action-btn.recharge {
  background: linear-gradient(135deg, #f0fff4 0%, #c6f6d5 100%);
  border-color: #9ae6b4;
}

.action-btn.recharge i { 
  background: linear-gradient(135deg, #38a169 0%, #48bb78 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.action-btn.withdraw {
  background: linear-gradient(135deg, #fff5f5 0%, #fed7d7 100%);
  border-color: #feb2b2;
}

.action-btn.withdraw i { 
  background: linear-gradient(135deg, #e53e3e 0%, #f56565 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.action-btn.transfer {
  background: linear-gradient(135deg, #ebf8ff 0%, #bee3f8 100%);
  border-color: #90cdf4;
}

.action-btn.transfer i { 
  background: linear-gradient(135deg, #3182ce 0%, #4299e1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.action-btn.repay {
  background: linear-gradient(135deg, #fffaf0 0%, #feebc8 100%);
  border-color: #fbd38d;
}

.action-btn.repay i { 
  background: linear-gradient(135deg, #dd6b20 0%, #ed8936 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.action-btn.history {
  background: linear-gradient(135deg, #faf5ff 0%, #e9d8fd 100%);
  border-color: #d6bcfa;
}

.action-btn.history i { 
  background: linear-gradient(135deg, #805ad5 0%, #9f7aea 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/****************** 充值对话框优化 ******************/
.amount-selection {
  margin-bottom: 4vw;
}

.amount-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3vw;
  margin-top: 3vw;
}

.amount-option {
  padding: 4vw 2vw;
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  text-align: center;
  font-size: 4.2vw;
  font-weight: 600;
  color: #4a5568;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.amount-option:hover {
  transform: translateY(-3px);
  border-color: #cbd5e1;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.amount-option.active {
  background: linear-gradient(135deg, #0097FF 0%, #0056b3 100%);
  color: white;
  border-color: #0097FF;
  box-shadow: 0 8px 25px rgba(0, 151, 255, 0.3);
  transform: scale(1.05);
}

.bonus-info {
  background: linear-gradient(135deg, #fffaf0 0%, #feebc8 100%);
  border: 2px solid #fbd38d;
  border-radius: 12px;
  padding: 3.5vw;
  margin: 4vw 0;
  display: flex;
  align-items: center;
  gap: 3vw;
  font-size: 4vw;
  font-weight: 600;
  color: #dd6b20;
}

.bonus-info i {
  font-size: 5vw;
  color: #ed8936;
}

.payment-methods {
  margin-top: 5vw;
}

.payment-methods h4 {
  font-size: 4.5vw;
  color: #2d3748;
  margin-bottom: 3vw;
  font-weight: 700;
}

.payment-options {
  display: flex;
  flex-direction: column;
  gap: 2.5vw;
}

.payment-option {
  display: flex;
  align-items: center;
  padding: 4vw;
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: white;
  gap: 3vw;
}

.payment-option:hover {
  transform: translateX(5px);
  border-color: #cbd5e1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.payment-option.active {
  background: linear-gradient(135deg, #f0fff4 0%, #c6f6d5 100%);
  border-color: #9ae6b4;
  transform: translateX(8px) scale(1.02);
}

.payment-option i {
  font-size: 6vw;
  width: 8vw;
  text-align: center;
}

.payment-option.alipay i {
  color: #0097FF;
}

.payment-option.wechat i {
  color: #07c160;
}

.payment-option.bank i {
  color: #ff6b6b;
}

.payment-option span {
  font-size: 4.2vw;
  font-weight: 600;
  color: #2d3748;
}

/****************** 提现对话框优化 ******************/
.withdraw-amount {
  margin-bottom: 4vw;
}

.withdraw-amount label {
  display: block;
  font-size: 4.2vw;
  color: #2d3748;
  margin-bottom: 3vw;
  font-weight: 700;
}

.amount-input {
  display: flex;
  align-items: center;
  border: 3px solid #e2e8f0;
  border-radius: 16px;
  padding: 4vw;
  background: white;
  transition: all 0.3s ease;
  margin-bottom: 3vw;
}

.amount-input:focus-within {
  border-color: #0097FF;
  box-shadow: 0 0 0 3px rgba(0, 151, 255, 0.1);
  transform: translateY(-2px);
}

.currency {
  font-size: 6vw;
  font-weight: 700;
  color: #2d3748;
  margin-right: 3vw;
}

.amount-input input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 6vw;
  font-weight: 700;
  color: #2d3748;
  background: transparent;
}

.amount-input input::placeholder {
  color: #cbd5e1;
}

.available-balance {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 3.8vw;
  color: #718096;
  font-weight: 500;
}

.withdraw-all {
  color: #0097FF;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  padding: 2vw 3vw;
  border-radius: 8px;
  background: rgba(0, 151, 255, 0.1);
}

.withdraw-all:hover {
  color: #0056b3;
  background: rgba(0, 151, 255, 0.2);
  transform: scale(1.05);
}

.fee-info {
  background: linear-gradient(135deg, #fff5f5 0%, #fed7d7 100%);
  border: 2px solid #feb2b2;
  border-radius: 12px;
  padding: 3.5vw;
  margin: 4vw 0;
  display: flex;
  align-items: center;
  gap: 3vw;
  font-size: 4vw;
  font-weight: 600;
  color: #e53e3e;
}

.fee-info i {
  font-size: 5vw;
  color: #f56565;
}

.bank-card h4 {
  font-size: 4.5vw;
  color: #2d3748;
  margin-bottom: 3vw;
  font-weight: 700;
}

.card-options {
  display: flex;
  flex-direction: column;
  gap: 2.5vw;
}

.card-option {
  display: flex;
  align-items: center;
  padding: 4vw;
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: white;
  gap: 3vw;
}

.card-option:hover {
  transform: translateX(5px);
  border-color: #cbd5e1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.card-option.active {
  background: linear-gradient(135deg, #f0fff4 0%, #c6f6d5 100%);
  border-color: #9ae6b4;
  transform: translateX(8px) scale(1.02);
}

.card-option i {
  font-size: 6vw;
  color: #0097FF;
  width: 8vw;
  text-align: center;
}

.card-info {
  flex: 1;
}

.bank-name {
  font-size: 4.2vw;
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 1vw;
}

.card-number {
  font-size: 3.8vw;
  color: #718096;
  font-weight: 500;
}

.add-card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vw;
  border: 2px dashed #cbd5e1;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #f8fafc;
  gap: 3vw;
  color: #718096;
}

.add-card:hover {
  border-color: #0097FF;
  background: rgba(0, 151, 255, 0.05);
  color: #0097FF;
  transform: scale(1.02);
}

.add-card i {
  font-size: 5vw;
}

.add-card span {
  font-size: 4.2vw;
  font-weight: 600;
}

/****************** 转账对话框优化 ******************/
.transfer-recipient,
.transfer-amount,
.transfer-note {
  margin-bottom: 5vw;
}

.transfer-recipient label,
.transfer-amount label,
.transfer-note label {
  display: block;
  font-size: 4.2vw;
  color: #2d3748;
  margin-bottom: 3vw;
  font-weight: 700;
}

.transfer-recipient input,
.transfer-note input {
  width: 100%;
  padding: 4vw;
  border: 3px solid #e2e8f0;
  border-radius: 16px;
  font-size: 4.2vw;
  transition: all 0.3s ease;
  background: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.transfer-recipient input:focus,
.transfer-note input:focus {
  outline: none;
  border-color: #0097FF;
  box-shadow: 0 0 0 3px rgba(0, 151, 255, 0.1);
  transform: translateY(-2px);
}

.transfer-amount .amount-input {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/****************** 还款对话框优化 ******************/
.repay-amount {
  margin-bottom: 5vw;
}

.repay-amount label {
  display: block;
  font-size: 4.2vw;
  color: #2d3748;
  margin-bottom: 3vw;
  font-weight: 700;
}

.available-info {
  margin-top: 4vw;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-radius: 12px;
  padding: 3.5vw;
}

.info-item {
  font-size: 3.8vw;
  color: #4a5568;
  margin-bottom: 2vw;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.repay-all {
  color: #0097FF;
  cursor: pointer;
  font-weight: 700;
  transition: all 0.3s ease;
  padding: 2vw 3vw;
  border-radius: 8px;
  background: rgba(0, 151, 255, 0.1);
  text-align: center;
  margin-top: 2vw;
  display: block;
}

.repay-all:hover {
  color: #0056b3;
  background: rgba(0, 151, 255, 0.2);
  transform: scale(1.05);
}

.repay-note {
  margin-bottom: 4vw;
}

.repay-note label {
  display: block;
  font-size: 4.2vw;
  color: #2d3748;
  margin-bottom: 3vw;
  font-weight: 700;
}

.repay-note input {
  width: 100%;
  padding: 4vw;
  border: 3px solid #e2e8f0;
  border-radius: 16px;
  font-size: 4.2vw;
  transition: all 0.3s ease;
  background: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.repay-note input:focus {
  outline: none;
  border-color: #0097FF;
  box-shadow: 0 0 0 3px rgba(0, 151, 255, 0.1);
  transform: translateY(-2px);
}

/****************** 响应式设计优化 ******************/
@media (min-width: 768px) {
  .action-buttons {
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
  }
  
  .action-btn {
    padding: 20px 10px;
    min-height: 100px;
    border-radius: 20px;
  }
  
  .action-btn i {
    font-size: 32px;
  }
  
  .action-btn span {
    font-size: 14px;
  }
  
  .amount-options {
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
  }
  
  .amount-option {
    padding: 20px 10px;
    font-size: 16px;
    border-radius: 16px;
  }
  
  .bonus-info {
    padding: 15px;
    font-size: 14px;
    margin: 20px 0;
  }
  
  .bonus-info i {
    font-size: 18px;
  }
  
  .payment-methods h4 {
    font-size: 18px;
  }
  
  .payment-option {
    padding: 15px;
    border-radius: 16px;
  }
  
  .payment-option i {
    font-size: 20px;
    width: 30px;
  }
  
  .payment-option span {
    font-size: 16px;
  }
  
  .withdraw-amount label {
    font-size: 16px;
  }
  
  .amount-input {
    padding: 15px;
    border-radius: 16px;
    margin-bottom: 15px;
  }
  
  .currency {
    font-size: 24px;
    margin-right: 10px;
  }
  
  .amount-input input {
    font-size: 24px;
  }
  
  .available-balance {
    font-size: 14px;
  }
  
  .withdraw-all {
    padding: 8px 12px;
    font-size: 14px;
  }
  
  .fee-info {
    padding: 15px;
    font-size: 14px;
    margin: 20px 0;
  }
  
  .fee-info i {
    font-size: 18px;
  }
  
  .bank-card h4 {
    font-size: 18px;
  }
  
  .card-option {
    padding: 15px;
    border-radius: 16px;
  }
  
  .card-option i {
    font-size: 20px;
    width: 30px;
  }
  
  .bank-name {
    font-size: 16px;
  }
  
  .card-number {
    font-size: 14px;
  }
  
  .add-card {
    padding: 15px;
    border-radius: 16px;
  }
  
  .add-card i {
    font-size: 18px;
  }
  
  .add-card span {
    font-size: 16px;
  }
  
  .transfer-recipient label,
  .transfer-amount label,
  .transfer-note label,
  .repay-amount label,
  .repay-note label {
    font-size: 16px;
  }
  
  .transfer-recipient input,
  .transfer-note input,
  .repay-note input {
    padding: 15px;
    font-size: 16px;
    border-radius: 16px;
  }
  
  .available-info {
    padding: 15px;
    border-radius: 12px;
    margin-top: 20px;
  }
  
  .info-item {
    font-size: 14px;
  }
  
  .repay-all {
    padding: 8px 12px;
    font-size: 14px;
    margin-top: 10px;
  }
}
</style>